import React, { PureComponent } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Table, Divider, Modal, Popconfirm, Badge, Row, Col } from 'antd';
import Form from './components/SearchForm';
import Video from '@/components/ReactVideoRTMP/'
import { checkInit } from '@/utils/util';
import { UmiComponentProps, BaseComponentProps } from '@/common/type';
import Ellipsis from '@/components/Ellipsis';

export interface P {
  dispatch?: Function,
  children?: React.ReactNode,
  loading?: boolean,
  buttons?: Array<any>,
  brandData?: Array<any>,
  productData?: Array<any>,
  list?: {
    data: Array<any>,
    dataCnt: number
  }
}
type Props = P & UmiComponentProps & BaseComponentProps

const ONE_PAGE_SIZE = 10;

@connect(({ device_fire_monitor, loading, menu }) => ({
  buttons: menu.buttons,
  list: device_fire_monitor.list || {},
  loading: loading.effects['device_fire_monitor/queryPage'],
  brandData: device_fire_monitor.brandData,
  productData: device_fire_monitor.productData
}))
class Device extends PureComponent<Props, any> {
  constructor(props) {
    super(props);
    this.initCurrent = this.initCurrent.bind(this);
  }

  state = {
    current: 1,
    visible: false, //摄像头查看
    url: null,

  };

  remove = (id) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'device_fire_monitor/remove',
      payload: id
    }).then(() => {
      this.queryData();
    })
  };

  queryData(offset = 1, size = ONE_PAGE_SIZE) {
    const { dispatch } = this.props;

    dispatch({
      type: 'device_fire_monitor/queryPage',
      payload: {
        pageNum: offset,
        pageSize: size,
      },
    });
  }

  initCurrent() {
    this.setState({
      current: 1
    })
  }
  onShowSizeChange = (current, pageSize) => {
    const { dispatch, cond = {} } = this.props;
    cond.pageSize = pageSize;
    dispatch({ type: `device_fire_monitor/updateCond`, payload: cond }).then(() => {
      this.initCurrent()
    })
  }
  handleCamera = (v) => {
    this.setState({ url: v, visible: true })
  }
  componentDidMount() {
    const { dispatch } = this.props;
    checkInit() ? dispatch({ type: 'device_fire_monitor/initCond' }) : this.queryData();
  }
  private handleCancel = () => {
    this.setState({ url: null, visible: false })
  }
  render() {
    const { buttons, brandData, productData } = this.props;
    const { data = [], dataCnt } = this.props.list;
    const { url } = this.state
    const btnList = {};
    if (buttons) {
      buttons.forEach(item => {
        btnList[item.name] = item.name
      });
    }

    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      onShowSizeChange: this.onShowSizeChange,
      onChange: (current) => {
        this.setState({ current });
        this.queryData(current)
      },
    };
    const columns = [{
      title: '系统编号',
      dataIndex: 'systemNo'
    }, {
      title: '设备名称',
      dataIndex: 'name'
    }, {
      title: '安装位置',
      dataIndex: 'installationAddr',
      render: (text, record) => (
        <Ellipsis tooltip={true} lines={1}>
          {record.buildName || ''}{record.floorName || ''}{record.areaName || ''}{text || ''}
        </Ellipsis>
      )
    }, {
      title: '通讯地址',
      dataIndex: 'networkAddr'
    }, {
      title: '实时镜像名称',
      dataIndex: 'cameraName'
    }, {
      title: '热成像名称',
      dataIndex: 'thermalImageName'
    }, {
      title: '联网状态',
      dataIndex: 'runStatus',
      render: (text) => (
        <Badge status={text === '1' ? 'success' : 'error'} text={text === '1' ? '在线' : '离线'} />
      )
    }, {
      title: '厂家',
      dataIndex: 'brandName'
    }, {
      title: '型号',
      dataIndex: 'productName'
    }, {
      title: '操作', key: 'x', render: (record, text, index) => {
        return (
          <div style={{ display: 'flex' }}>
            <>
              {/*
                record.cameraAddress && record.thermalImageAddress ? <a onClick={() => this.handleCamera([
                  record.cameraAddress,
                  record.thermalImageAddress
                ])}>查看摄像头</a> : <span style={{ color: '#ccc' }}>查看摄像头</span>*/
              }
              <Divider type="vertical" />
              <Link to={`/data/device_fire_monitor/${record.id}/update`}>编辑</Link>
              <Divider type="vertical" />
              {
                <a onClick={() => {
                  window.open(record.cameraAddress)
                }}>在线视频预览</a>
              }
              <Divider type="vertical" />
              {
                <a onClick={() => {
                  window.open(record.thermalImageAddress)
                }}>热成像预览</a>
              }
              {/* <Popconfirm title="请确认是否删除?" onConfirm={() => this.remove(record.id)} okText="确定" cancelText="取消">
                <a>删除</a>
              </Popconfirm> */}
            </>
          </div>
        )
      }
    }];

    const ans = Array.isArray(data) ? data.map((v, index) => ({
      ...v,
      ind: index + 1 < 10 ? `0${index + 1}` : index + 1,
    })) : []

    return (
      <div>
        <Form
          current={this.state.current}
          initCurrent={this.initCurrent}
          brandData={brandData}
          productData={productData}
        />
        <Table
          columns={[{
            title: '序号',
            dataIndex: 'ind',
          }, ...columns]}
          pagination={pagination}
          dataSource={ans}
          bordered
          rowKey="id"
          loading={this.props.loading}
        />
        <Modal
          title="查看摄像头"
          visible={this.state.visible}
          footer={null}
          width={800}
          bodyStyle={{ height: '500px' }}
          onCancel={this.handleCancel}
        >
          {this.state.url &&
            <>
              <Row gutter={1} style={{ height: '100%', width: '100%' }}>
                <Col span={12} style={{ height: '90%' }}>
                  <h3 style={{ fontSize: 18 }}>实时镜像</h3>
                  <Video
                    source={url[0]}
                    autoPlay
                    controls
                    ids="video1"
                  />
                </Col>
                <Col span={12} style={{ height: '90%' }}>
                  <h3 style={{ fontSize: 18 }}>热成像</h3>
                  <Video
                    source={url[1]}
                    autoPlay
                    controls
                    ids="video2"
                  />
                </Col>
              </Row>
            </>
          }
        </Modal>
      </div>
    );
  }
}

export default Device;
